<template>
  <div class="roll-statistics-com" :class="`roll-${type}`">
    <template v-if="type===1">
      <div class="title-block">
        <Light class="light" :selected="true" :color="color"></Light>
        <div class="title"><div class="title-text">{{index+1}}、{{data.name}}</div></div>
        <div class="icon-block">
          <div class="triangle"></div>
          <div class="icon-item">
            <div class="iconfont icon-qitafuwu"></div>
            <div class="name">{{data.typeText}}</div>
          </div>
          <div class="icon-item">
            <div class="iconfont icon-wodedamaijihuo"></div>
            <div class="name">{{data.leader}}</div>
          </div>
        </div>
      </div>
      <div class="info-block">
        <div class="info-item" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
          <span class="info-label">责任单位：</span>
          <span class="info-value">{{data.unitName}}</span>
        </div>
        <div class="info-item" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;line-height: 2">
          <span class="info-label">进展情况：</span>
          <span class="info-value">{{data.remakes||'暂无'}}</span>
        </div>
      </div>
    </template>
    <template v-else-if="type===2||type===3">
      <div class="title-block">
        <Light class="light" :selected="true" :color="color"></Light>
        <div class="title"><div class="title-text">{{index+1}}、{{type==2?data.departmentText:data.unitName}}</div></div>
        <div class="icon-block">
          <div class="triangle"></div>
          分类：{{data.typeText}}
        </div>
      </div>
      <div class="info-block">
        <div class="progress-describe">完成比例<span class="progress-value" :style="`left:calc(${getTaskCompletion(data)<30?30:getTaskCompletion(data)}% - 20px)`">{{getTaskCompletion(data)}}%</span></div>
        <Progress :progress="getTaskCompletion(data)"></Progress>
        <div class="task-block">
          <div class="task-item">任务金额：{{data.taskPlan||0}}万元</div>
          <div class="task-item">完成金额：{{data.amount||0}}万元</div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import Light from "../Light/Light.vue";
import Progress from "./Progress.vue";

export default {
  name: "RollStatisticsItem",
  components: {Progress, Light},
  props:{
    type:{
      type:Number,
      default:1,
    },
    data:{
      type:Object,
      default:null,
    },
    color:{
      type:String,
      default:'#fed200'
    },
    index:{
      type:Number,
      default:1,
    }
  },
  methods:{
    getTaskCompletion(val){
      let num=val.taskCompletion||0;
      num=num>100?100:num;
      return num;
    }
  }
}
</script>

<style scoped lang="scss">
.roll-statistics-com.roll-1{
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: rgba(7, 166, 255, 0.15);
  .title-block{
    height: 80px;
    border-radius: 12px;
    background: rgba(7, 166, 255, 0.3);
    display: flex;
    align-items: center;
    overflow: hidden;
    .light{
      width: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .title{
      width: calc(100% - 190px);
      height: 100%;
      display: flex;
      align-items: center;
      .title-text{
        max-height: 100%;
        color: #fff;
        line-height: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
    .icon-block{
      width: 120px;
      height: 100%;
      padding-left: 10px;
      position: relative;
      background-image: linear-gradient(#0d8ae6,#2655ff);
      .triangle{
        position: absolute;
        transform: rotate(45deg);
        left: -5px;
        top: 35px;
        background: #0c62b9;
        width: 10px;
        height: 10px;
      }
      .icon-item{
        height: 50%;
        display: flex;
        align-items: center;
        .iconfont{
          color: #fff;
          margin-right: 5px;
        }
        .name{
          color: #fff;
        }
      }
    }
  }
  .info-block{
    width: 100%;
    .info-item{
      width: 100%;
      padding-left: 20px;
      margin-top: 15px;
      .info-label{
        color: #bac1d8;
      }
      .info-value{
        color: #fff;
      }
    }
  }
}
.roll-statistics-com.roll-2,.roll-statistics-com.roll-3{
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: rgba(7, 166, 255, 0.15);
  .title-block{
    height: 60px;
    border-radius: 12px;
    background: rgba(7, 166, 255, 0.3);
    display: flex;
    align-items: center;
    overflow: hidden;
    .light{
      width: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .title{
      flex-grow: 1;
      height: 100%;
      display: flex;
      align-items: center;
      .title-text{
        max-height: 100%;
        color: #fff;
        line-height: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
    .icon-block{
      flex-grow: 0;
      position: relative;
      background-image: linear-gradient(#0d8ae6,#2655ff);
      color: #fff;
      padding: 0 20px;
      height: 100%;
      display: flex;
      align-items: center;
      .triangle{
        position: absolute;
        transform: rotate(45deg);
        left: -5px;
        top: 25px;
        background: #0c62b9;
        width: 10px;
        height: 10px;
      }
    }
  }
  .info-block{
    width: 100%;
    padding:10px 20px;
    .progress-describe{
      color: #fff;
      width: 100%;
      margin: 15px 0;
      position: relative;
      .progress-value{
        color: #fff;
        position: absolute;
      }
    }
    .task-block{
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin-top: 20px;
      .task-item{
        color: #fff;
        flex-grow: 1;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
